<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

    <meta charset="utf-8">
    <title>register</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/bootstrap.min.css">
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="__PUBLIC__/home/assets/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/home/assets/css/supersized.css">
    <link rel="stylesheet" href="__PUBLIC__/home/assets/css/style.css">


    <script src="__PUBLIC__/home/js/jquery-3.1.1.min.js"></script>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<a href="javascript:;" class="return" style="display:block;height:20px;width:30px;font-size:20px;color:#fff;"><</a>
<script>
    $(".return").click(function(){
        history.go(-1);
    });
</script>
<div class="page-container">
    <h1>Register</h1>
    <form action="{:U('login/register')}" method="post">
        <input type="text" name="user_name" class="username" placeholder="User" minlength="6" maxlength="18" style="width:80%;"><span class="user_ajax"></span>
        <input type="password" name="password" class="password" placeholder="Pass" minlength="6" maxlength="18" style="width:80%;"><span class="pass"></span>
        <input type="password" name="repassword" class="repassword" minlength="6" maxlength="18" placeholder="RePass" style="width:80%;"><span class="repass"></span>

        <button type="submit" >Register</button>
        <div class="error"><span>+</span></div>
    </form>
<div align="center" style="margin-top:10%;">login <a href="{:U('login/index')}" style="margin-right:10%;">登录</a> Home <a href="{:U('index/index')}">首页</a></div>
        
<!-- Javascript -->
<script src="__PUBLIC__/home/assets/js/jquery-1.8.2.min.js"></script>
<script src="__PUBLIC__/home/assets/js/supersized.3.2.7.min.js"></script>

<script>
    $('.username').keyup(function ajax(){
            $.ajax({
                type:'post',
                data:{user_name:$('.username').val()},
                async:true,
                url:"{:U('login/reg_ajax')}",
                success:function (value){
                    if(value == 0){
                        $('.user_ajax').empty();
                        $('.user_ajax').html('');
                    }else if(value == 1){
                       $('.user_ajax').empty();
                       $('.user_ajax').html("<img src=\"__PUBLIC__/home/image/gou_03.gif\" height='20px'>");
                   }else if(value == 2){
                       $('.user_ajax').empty();
                       $('.user_ajax').html("<img src=\"__PUBLIC__/home/image/gou_06.gif\" height='20px'>");
                   }
                }
            })
    })

    $('.password').keyup(function(){
        if($('.password').val() == ''){
            $('.pass').empty();
            $('.pass').html('');
        }else if($('.password').val().length >= 6){
            $('.pass').empty();
            $('.pass').html("<img src=\"__PUBLIC__/home/image/gou_03.gif\" height='20px'>");
            if($('.repassword').val() != $('.password').val()){
                $('.repass').empty();
                $('.repass').html("<img src=\"__PUBLIC__/home/image/gou_06.gif\" height='20px'>");
            }
        }else{
            $('.pass').empty();
            $('.pass').html("<img src=\"__PUBLIC__/home/image/gou_06.gif\" height='20px'>");
        }
    })

    $('.repassword').keyup(function(){
        if($('.repassword').val() == ''){
            $('.repass').empty();
            $('.repass').html('');
        }else if($('.repassword').val() == $('.password').val()){
            $('.repass').empty();
            $('.repass').html("<img src=\"__PUBLIC__/home/image/gou_03.gif\" height='20px'>");
        }else{
            $('.repass').empty();
            $('.repass').html("<img src=\"__PUBLIC__/home/image/gou_06.gif\" height='20px'>");
        }
    })


    jQuery(function($){

        $.supersized({

            // Functionality
            slide_interval     : 4000,    // Length between transitions
            transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed   : 1000,    // Speed of transition
            performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

            // Size & Position
            min_width          : 0,    // Min width allowed (in pixels)
            min_height         : 0,    // Min height allowed (in pixels)
            vertical_center    : 1,    // Vertically center background
            horizontal_center  : 1,    // Horizontally center background
            fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
            fit_portrait       : 1,    // Portrait images will not exceed browser height
            fit_landscape      : 0,    // Landscape images will not exceed browser width

            // Components
            slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides             : [    // Slideshow Images
                {image : '__PUBLIC__/home/assets/img/backgrounds/1.jpg'},
                {image : '__PUBLIC__/home/assets/img/backgrounds/2.jpg'},
                {image : '__PUBLIC__/home/assets/img/backgrounds/3.jpg'}
            ]

        });

    });
</script>
<script src="__PUBLIC__/home/assets/js/scripts.js"></script>


</body>

</html>

